<div class="container">
	<div class="row">
		<!--支付平台占比-->
		<div class="col-sm-6" >
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5><span style="font-size: 16px;" class="label label-success">线上课程支付平台占比</span></h5>
				</div>
				<div class="ibox-content">
					<div class="echarts" id="userPie" style="height: 300px;"></div>
				</div>
			</div>
		</div>
		<!--热销课程占比-->
		<div class="col-sm-6">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5><span style="font-size: 16px;" class="label label-success">热销课程TOP5</span></h5>
				</div>
				<div class="ibox-content">
					<div class="echarts" id="coursesBar" style="height: 300px;"></div>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<!--折线图-->
		<div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5><span style="font-size: 16px;" class="label label-success">线上课程运营收入</span></h5>
                        <div class="ibox-tools">
                            <button class="btn btn-sm btn-primary" onclick="initWeekLine(3)">周度</button>
                            <button class="btn btn-sm btn-primary" onclick="initWeekLine(1)">月度</button>
                            <button class="btn btn-sm btn-primary" onclick="initWeekLine(2)">年度</button>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-line-chart"></div>
                    </div>
                </div>
            </div>
	</div>
</div>
</div>

<script>
	/*支付平台占比饼状图*/
	$(function() {

		var pieChart = echarts.init(document.getElementById("userPie"));
		var pieoption = {
			title: {
				text: '百知课程app付费平台占比',
				x: 'center'
			},
			tooltip: {
				trigger: 'item',
				formatter: "{a} <br/>{b} : {c} ({d}%)"
			},
			legend: {
				orient: 'vertical',
				x: 'left',
				data: []
			},
			calculable: true,
			series: [{
				name: '支付平台',
				type: 'pie',
				radius: '55%',
				center: ['50%', '60%'],
				data:[]
			}]
		};
		pieChart.setOption(pieoption);
        //获取支付信息
        $.ajax({
            type : 'get',
            url : "/bzas/chart/setUserPie",
            dataType : 'json',
            success : function(data) {
//				console.info(data.categories);
//				console.info(data.chartData);
                pieChart.setOption({
                    series: [{
                        legend: {
                            data: data.categories
                        },
                        data: data.chartData
                    }]
                });
            }
        });


		/*初始化热销课程排行榜*/
		var barChart = echarts.init(document.getElementById("coursesBar"));
		var baroption = {
			title: {
				text: '热销课程排行榜'
			},
			tooltip: {
				trigger: 'axis'
			},
			legend: {
				data: ['点击量', '购买量']
			},
			grid: {
				x: 30,
				x2: 40,
				y2: 24
			},
			calculable: true,
			xAxis: [{
				axisLabel: {  
					interval:0,  
		     		rotate:0 
				},
				data: ['CoreJava课程', 'MyBatis-plus', 'SpringBoot', 'ElasticSearch', '分布式缓存体系']
			}],
			
			yAxis:{},

			series: [{
				name: '点击量',
				type: 'bar',
				data: [20000, 30000, 25000,15000 ,60000],
				markPoint: {
					data: [{
						type: 'max',
						name: '最大值'
					}, {
						type: 'min',
						name: '最小值'
					}]
				}
			}, {
				name: '购买量',
				type: 'bar',
				data: [10000, 20000, 15000,5000 ,6000],
				markPoint: {
					data: [{
						type: 'max',
						name: '最大值'
					}, {
						type: 'min',
						name: '最小值'
					}]
				}
			}]
		};
		barChart.setOption(baroption);
        //课程信息
        $.ajax({
            type : 'get',
            url : "/bzas/chart/setCourseBar",
            dataType : 'json',
            success : function(data) {
//                courseNameList x轴
//                * courseClickVolumeList 课程点击数
//                * courseBuyVolumeList 课程购买数
                barChart.setOption({
                    xAxis: [{
                        //课程目录
                        data: data.courseNameList
                    }],
                    series: [{
						//课程点击量
                        data: data.courseClickVolumeList
                    }, {
//						课程购买量
                        data: data.courseBuyVolumeList
                    }]
                });
            }
        });
		
		//初始化折线图
		initWeekLine(3);
	})
	/*
	线上课程营收曲线
	 * */
	function initWeekLine(swt){
		switch(swt){
			//月度
			case 1:
				var lineChart1 = echarts.init(document.getElementById("echarts-line-chart"));
			    var lineoption1 = {
			        title : {
			        	x:'center',
			            text: '平台月度营收'
			        },
			        tooltip : {
			            trigger: 'axis'
			        },
			        grid:{
			        	left:100
			        },
			        calculable : true,
			        xAxis : [
			            {
			                type : 'category',
			                boundaryGap : false,
			                data : ['周一','周二','周三','周四','周五','周六','周日']
			            }
			        ],
			        yAxis : [
			            {
			                type : 'value',
			                axisLabel : {
			                    formatter: '{value} 人民币'
			                }
			            }
			        ],
			        series : [
			            {
			                name:'最高气温',
			                type:'line',
			                data:[11, 11, 15, 13, 12, 13, 10],
			                markPoint : {
			                    data : [
			                        {type : 'max', name: '最大值'},
			                        {type : 'min', name: '最小值'}
			                    ]
			                },
			                markLine : {
			                    data : [
			                        {type : 'average', name: '平均值'}
			                    ]
			                }
			            }
			        ]
			    };
			    lineChart1.setOption(lineoption1);
			break;			
			//年度
			case 2:
				var lineChart2 = echarts.init(document.getElementById("echarts-line-chart"));
			    var lineoption2 = {
			        title : {
			            text: '平台年度营收',
			            x:'center'
			        },
			        tooltip : {
			            trigger: 'axis'
			        },
			        grid:{
			        	left:100
			        },
			        calculable : true,
			        xAxis : [
			            {
			                type : 'category',
			                boundaryGap : false,
			                data : ['周一','周二','周三','周四','周五','周六','周日']
			            }
			        ],
			        yAxis : [
			            {
			                type : 'value',
			                axisLabel : {
			                    formatter: '{value} °C'
			                }
			            }
			        ],
			        series : [
			            {
			                name:'最高气温',
			                type:'line',
			                data:[11, 11, 15, 13, 12, 13, 10],
			                markPoint : {
			                    data : [
			                        {type : 'max', name: '最大值'},
			                        {type : 'min', name: '最小值'}
			                    ]
			                },
			                markLine : {
			                    data : [
			                        {type : 'average', name: '平均值'}
			                    ]
			                }
			            }
			        ]
			    };
			    lineChart2.setOption(lineoption2);
			break;
			case 3:
				var lineChart3 = echarts.init(document.getElementById("echarts-line-chart"));
			    var lineoption3 = {
			        title : {
			            text: '平台周度营收',
			            x:'center'
			        },
			        tooltip : {
			            trigger: 'axis'
			        },
			        grid:{
			        	left:100
			        },
			        calculable : true,
			        xAxis : [
			            {
			                type : 'category',
			                boundaryGap : false,
			                data : ['周一','周二','周三','周四','周五','周六','周日']
			            }
			        ],
			        yAxis : [
			            {
			                type : 'value',
			                axisLabel : {
			                    formatter: '{value} ￥'
			                }
			            }
			        ],
			        series : [
			            {
			                name:'最高气温',
			                type:'line',
			                data:[11000, 22200, 8000, 30000, 15000, 10000, 40000],
			                markPoint : {
			                    data : [
			                        {type : 'max', name: '最大值'},
			                        {type : 'min', name: '最小值'}
			                    ]
			                },
			                markLine : {
			                    data : [
			                        {type : 'average', name: '平均值'}
			                    ]
			                }
			            }
			        ]
			    };
			    lineChart3.setOption(lineoption3);
		}
	}
	
	
	
	
	
</script>